Welcome to JavaScript!

7.11 组合方式获取元素

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<p class="cla" >我要学习0</p>

<div id="id" class="cla" name="na">我要学习1

<p class="cla" >我要学习2</p>

<div class="cla" name="na">我要学习3</div>

<p class="cla">我要学习4</p>

<div class="cla" name="na">我要学习5</div>

</div>

<script type="text/javascript">

var z=document.getElementById("id").getElementsByTagName("p");

t=z.length

for (var i=0;i<t;i++){

z[i].style.color="red";

}

</script>

</body>

</html>

返回值:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<p class="cla" >我要学习0</p>

<div id="id" class="cla1" name="na">我要学习1

<p class="cla" >我要学习2</p>

<div class="cla1" name="na">我要学习3</div>

<p class="cla">我要学习4</p>

<div class="cla1" name="na">我要学习5</div>

</div>

<script type="text/javascript">

var z=document.getElementById("id").getElementsByClassName("cla1");

t=z.length

for (var i=0;i<t;i++){

z[i].style.color="red";

}

</script>

</body>

</html>

正确的做法只有上面两种,并且id选择器必须在前。

以下四种方法均为错误:

var z=document.getElementById("id").getElementsByName("na");

var z=document.getElementById("id").getElementsByClassName("id");

var z=document.getElementsByClassName("cla").getElementsById("id");

var z=document.getElementsByClassName("cla").getElementsByTagName("na");